<template>
  <div class="mapContainer" v-if="props.location && props.location.latitude && isShow">
    <map :scale="16" :enable-rotate="true" :show-location="props.showLocation==1" :enable-building="true" :show-compass="true" :style="mapStyle" :latitude="props.location.latitude" :longitude="props.location.longitude" :markers="props.markers" @tap="tapClick" @regionchange="regionChange">
    </map>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
let props = defineProps([
  "modelValue",
  "location",
  "width",
  "height",
  "markers",
  "tapLink",
  "showLocation",
]);
const emit = defineEmits(["regionChange"]);

let isShow = ref(false);

onMounted(() => {
  init();
});

//计算属性
let mapStyle = computed(() => {
  return {
    width: props.width + "px",
    height: props.height + "px",
  };
});

function init() {
  isShow.value = false;
  setTimeout(() => {
    isShow.value = true;
  }, 100);
}

function tapClick() {
  if (props.tapLink) proxy.$utils.toLink(props.tapLink);
}

let regionChange = (e: any) => {
  emit("regionChange", e.detail.centerLocation);
};

defineExpose({ init });
</script>

<style lang="scss" scoped></style>
